<template>
<div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size">
            <el-row class="search-input">
                <el-form-item label="客户名称：">
                    <el-input v-model="filters.client" placeholder="客户名称"></el-input>
                </el-form-item>
                <el-form-item label="单位名称：">
                    <el-input v-model="filters.company_name" placeholder="单位名称"></el-input>
                </el-form-item>
                <el-form-item label="开票状态：">
                    <!-- <el-input v-model="filters.invoice_status" placeholder="开票状态"></el-input> -->
                    <el-select v-model="filters.approval_status">
                        <el-option label="未审核" value="1">未审核</el-option>
                        <el-option label="已审核" value="0">已审核</el-option>
                        <el-option label="审核未通过" value="2">审核未通过</el-option>
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row class="search-button">
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(filters)" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-hand-pointer-o" :label="$t('action.reset')" @click="reset" type="primary" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-plus" :label="$t('action.add')" type="primary" @click="handleAdd" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-trash" label="作废" type="primary" @click="abandoned" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-user-circle" label="审核" type="primary" @click="check"></kt-button>
                </el-form-item>
            </el-row>
        </el-form>
    </div>
    <!--表格内容栏-->
    <cy-table :height="350" :data="pageResult" :columns="filterColumns" @findPage="findPage" @handleDelete="handleDelete" :showEditOperation="false" ref="CyTable" @selectionChange="selectionChange" :showDetailOperation="true" @handleDetail="handleDetail"></cy-table>
    <!--新增编辑界面-->
    <el-dialog :title="operation?'新增':'编辑'" width="65%" :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose">
        <el-form :model="dataForm" label-width="130px" :rules="dataFormRules" ref="dataForm" :size="size" label-position="right" inline>
            <el-form-item label="ID：" prop="id" v-if="false">
                <el-input v-model="dataForm.id" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
            </el-form-item>
            <el-row>
                <el-form-item label="单位名称：" prop="company_name">
                    <el-input v-model="dataForm.company_name" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="纳税人识别码：" prop="taxpayer_identification_code">
                    <el-input v-model="dataForm.taxpayer_identification_code" auto-complete="off" maxlength="15" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="客户：" prop="client">
                    <el-input v-model="dataForm.client" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="注册地址：" prop="registered_add">
                    <el-input v-model="dataForm.registered_add" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="注册电话：" prop="registered_num">
                    <el-input v-model="dataForm.registered_num" auto-complete="off" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="银行基本账户：" prop="bank_num">
                    <el-input v-model="dataForm.bank_num" auto-complete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="开户银行：" prop="bank">
                    <el-input v-model="dataForm.bank" auto-complete="off" minlength="13" maxlength="19" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" show-word-limit></el-input>
                </el-form-item>
                <!-- <el-form-item label="审核状态" prop="approval_status">

<el-select v-model="dataForm.approval_status" style="width: 200px;">

<el-option label="未审核" value="1">未审核</el-option>

<el-option label="已审核" value="0">已审核</el-option>

<el-option label="审核未通过" value="2">审核未通过</el-option>

</el-select>

</el-form-item>-->
            </el-row>
            <el-row>
                <el-form-item label="营业执照复印件：" prop="business_license" label-width="150px">
                    <el-upload :action="imgUpload" :on-success="handleAvatarSuccess" list-type="picture-card" v-model="dataForm.business_license" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="2" style="float:left" ref="upload">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="一般纳税人认证资格复印件：" prop="General_taxpayer_certification" label-width="200px">
                    <el-upload :action="imgUpload" :on-success="handleAvatarSuccess1" list-type="picture-card" v-model="dataForm.General_taxpayer_certification" accept="image/gif, image/jpeg, image/jpg, image/png, image/svg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="2" style="float:left" ref="upload1">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisibleImage" @closed="handleCloseForImage">
        <el-form :model="imgForm" label-width="80px" ref="imgForm" :size="size">
            <img width="100%" :src="dialogImageUrl" alt="" name="imgs">
            <img width="100%" :src="dialogImageUrl1" alt="" name="imgs1">
        </el-form>
    </el-dialog>
    <el-dialog :title="operation?'审核':'审核'" :visible.sync="dialogVisiblecheck" width="30%">
        <el-form :model="statusForm" label-width="140px" ref="statusForm" :size="size">
            <el-row class="searchDialog-input">
                <el-form-item label="ID：" prop="id" v-if="false">
                    <el-input v-model="statusForm.id" :disabled="true" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="审核状态：" prop="approval_status" style="text-align:center">
                    <!-- <el-input v-model="filters.invoice_status" placeholder="开票状态"></el-input> -->
                    <el-select v-model="statusForm.approval_status" style="width: 300px;">
                        <el-option label="已审核" value="0">审核通过</el-option>
                        <el-option label="审核未通过" value="2">审核不通过</el-option>
                    </el-select>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button :size="size" @click.native="dialogVisiblecheck = false">{{$t('action.cancel')}}</el-button>
            <el-button :size="size" type="primary" @click.native="submitstatus" :loading="editLoading">{{$t('action.submit')}}</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script><script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
    format
} from "@/utils/datetime";
export default {
    components: {
        PopupTreeInput,
        CyTable,
        KtButton,
        TableColumnFilterDialog
    },
    data() {
        return {
            imgUpload: this.utils.getUpLoadHostForImg(),
            dialogImageUrl: "",
            dialogImageUrl1: "",
            size: "small",
            business_license: "",
            General_taxpayer_certification: "",
            filters: {
                name: ""
            },
            statusForm: {},

            imgs: "",
            sid: [],
            fileList: {},
            columns: [],
            billphoto: [],
            filterColumns: [],
            bill_photo_list: [],
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            },
            pageResult: {},

            operation: false, // true:新增, false:编辑
            dialogVisible: false, // 新增编辑界面是否显示
            editLoading: false,
            printPage: false,
            dialogVisiblecheck: false,
            dialogVisibleImage: false,
            dataFormRules: {
                company_name: [{
                    required: true,
                    message: "请输入单位名称",
                    trigger: "blur"
                }],
                taxpayer_identification_code: [{
                    required: true,
                    message: "请输入纳税人识别码",
                    trigger: "blur"
                }],
                client: [{
                    required: true,
                    message: "请输入客户",
                    trigger: "blur"
                }],
                registered_add: [{
                    required: true,
                    message: "请输入注册地址",
                    trigger: "blur"
                }],
                registered_num: [{
                    required: true,
                    message: "请输入注册电话",
                    trigger: "blur"
                }],
                bank_num: [{
                    required: true,
                    message: "请输入银行基本账户",
                    trigger: "blur"
                }],
                bank: [{
                    required: true,
                    message: "请输入开户银行",
                    trigger: "blur"
                }],
                document: [{
                    required: true,
                    message: "请输入资质证件",
                    trigger: "blur"
                }],
                approval_status: [{
                    required: true,
                    message: "请输入审核状态",
                    trigger: "change"
                }]
            },
            imgForm: {},
            dataForm: {
                product_name: "",
                product_specifications: ""
            },
            deptData: [],
            deptTreeProps: {
                label: "name",
                children: "children"
            },
            roles: [],
            ruleForm: {
                name: "",
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: ""
            }
        };
    },
    methods: {
        // 获取分页数据
        findPage: function (data) {
            this.filters.t = "invoicingQualification";
            this.$refs.CyTable.findPage(this.filters);
        },
        //清除图片缓存
        clearFiles() {
            this.$refs["upload"].clearFiles();
            this.$refs["upload1"].clearFiles();
        },
        handleClose() {
            this.clearFiles();
            this.bill_photo_list = [];
            this.$refs.dataForm.resetFields();
        },
        handleCloseForImage() {
            $("img[name=imgs]").attr("src", "");
            $("img[name=imgs1]").attr("src", "");
            this.dialogImageUrl = "";
            this.dialogImageUrl1 = "";
        },

        // 批量删除
        handleDelete: function (data) {
            var ids = "";
            for (var i = 0; i < data.params.length; i++) {
                ids = ids + data.params[i].id + ",";
            }
            data.t = "invoicingQualification";
            data.ids = ids;
            this.utils.request.deleteUserInfo(data, this.deleteInfoBack);
        }, //删除callback
        deleteInfoBack(data) {
            if (data.code == "0000") {
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
            } else {
                this.$message({
                    message: "操作失败, ",
                    type: "error"
                });
            }
            this.findPage();
        },
        //列表下载
        downloadExcel() {
            this.$confirm("确定下载列表文件?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                .then(() => {
                    let filename = "增票资质审核";
                    this.$refs.CyTable.exportData(
                        this.filters,
                        this.filterColumns,
                        filename
                    );
                })
                .catch(() => {});
        },
        // 显示新增界面
        handleAdd: function () {
            this.dialogVisible = true;
            this.operation = true;
            this.dataForm.id = "";
            //this.dataForm={};
            if (this.$refs["dataForm"] != undefined) {
                this.$refs["dataForm"].resetFields();
            }
            this.dataForm.business_license = "";
            this.dataForm.General_taxpayer_certification = "";
        },
        //显示详情图片
        handleDetail: function (data) {
            var this_ = this;
            this.dialogVisibleImage = true;

            this_.billphoto = (data.row.General_taxpayer_certification || "").split(
                ","
            );

            for (var i = 0; i < this_.billphoto.length; i++) {
                if (i == 0 && this_.billphoto[i] != "") {
                    this.dialogImageUrl = this_.billphoto[i];
                } else if (i == 1 && this_.billphoto[i] != "") {
                    this.dialogImageUrl1 = this_.billphoto[i];
                }
            }
        },
        //作废数据
        abandoned() {
            if (this.sid.length == 0 || this.sid.length > 1) {
                this.$message({
                    message: "请选择一条数据",
                    type: "error"
                });
            } else {
                this.$confirm("确定作废此条数据?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        var this_ = this;
                        var search = {};
                        search.t = "invoicingQualification";
                        let id = this_.sid.map(item => item.id).toString();
                        search.ids = id;
                        this.utils.request.deleteUserInfo(search, this.editabandonedBack);
                    })
                    .catch(() => {});
            }
        },
        editabandonedBack(data) {
            if (data.code == "0000") {
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
            } else {
                this.$message({
                    message: "操作失败",
                    type: "error"
                });
            }
            this.findPage();
        },
        //审核数据
        check() {
            if (this.sid.length == 0 || this.sid.length > 1) {
                this.$message({
                    message: "请选择一条数据",
                    type: "error"
                });
            } else {
                this.dialogVisiblecheck = true;
            }
        },
        // 打印
        print: function () {
            this.printPage = true;
            this.operation = true;
        },
        reset: function () {
            this.filters = {};
            this.findPage();
        },

        //图片移除
        handleRemove(file, fileList, index) {
            if (this.utils.isNull(index)) {
                this.fileList = fileList;
                if (fileList.length == 0) {
                    this.dataForm.business_license = "";
                } else {
                    this.imgs = fileList
                        .map(item => item.response.data.imgUrl)
                        .toString();
                    this.dataForm.business_license = this.imgs;
                }
            } else {
                this.bill_photo_list.splice(index, 1);
            }

            console.log(this.dataForm.document_license);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.ImageUrl = file.url;
            this.dialogVisibleImage = true;
        },
        //上传成功回调
        handleAvatarSuccess(res, file) {
            if (res.data.imgUrl == "") {
                this.$message({
                    message: "上传失败",
                    type: "error"
                });
            } else {
                this.dataForm.business_license += res.data.imgUrl + ",";
                console.log(this.dataForm.business_license);
                this.imageUrl = URL.createObjectURL(file.raw);
            }
        },
        //上传成功回调
        handleAvatarSuccess1(res, file) {
            if (res.data.imgUrl == "") {
                this.$message({
                    message: "上传失败",
                    type: "error"
                });
            } else {
                this.dataForm.General_taxpayer_certification += res.data.imgUrl + ",";
                console.log(this.dataForm.General_taxpayer_certification);
                this.imageUrl = URL.createObjectURL(file.raw);
            }
        },

        // // 显示编辑界面
        // handleEdit: function (params) {
        // 	console.log(params)
        // 	this.dialogVisible = true
        // 	this.operation = false

        // 	this.$nextTick(function(){
        //       this.dataForm = Object.assign({}, params.row);
        // 	});

        // 	var this_ = this;
        // 	var search={};
        // 	search.id=params.row.id
        // 	search.t="invoicingQualification";

        // 	this.utils.request.queryUserInfo(search,function(res){
        //         if(res.code == "0000"){
        // 		this_.tableData = res.data;
        // 		this_.bill_photo_list = this_.dataForm.document_license.split(",");
        // 		this_.dataForm.document_license = "";
        // 		}else{
        // 		this_.$message({message: '获取产品信息异常', type: 'error'});
        // 		}

        // 	})
        // },
        // 编辑
        submitForm: function () {
            this.$refs.dataForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        var this_ = this;
                        this.editLoading = true;
                        let params = Object.assign({}, this.dataForm);
                        params.t = "invoicingQualification";
                        // parma.tableData = JSON.stringify(this.tableData);

                        //var documentlicense = params.document_license.split(",");
                        //连接两个数组
                        //Wdocumentlicense = documentlicense.concat(this.bill_photo_list);

                        //过滤多余的','
                        // params.document_license = documentlicense.filter(function(e){
                        // 	if(this_.utils.isNull(e)){

                        // 	}else{
                        // 		return e
                        // 	}
                        //  }).join(',')
                        this.utils.request.editUserInfo(params, this.editInfoBack);
                    });
                }
            });
        },
        submitstatus: function () {
            this.$refs.statusForm.validate(valid => {
                if (valid) {
                    this.$confirm("确认提交吗？", "提示", {}).then(() => {
                        var this_ = this;
                        this.editLoading = true;
                        let params = Object.assign({}, this.statusForm);
                        let id = this_.sid.map(item => item.id).toString();
                        params.id = id;
                        params.t = "invoicingQualification";
                        this.utils.request.editUserInfo(params, this.editStatusBack);
                    });
                }
            });
        }, // 新增修改回调
        editInfoBack: function (data) {
            if (data.code == "0000") {
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
            } else {
                this.$message({
                    message: "操作失败",
                    type: "error"
                });
            }
            this.findPage();
            this.dialogVisible = false;
            this.operation = false;
            this.editLoading = false;
        },
        editStatusBack: function (data) {
            if (data.code == "0000") {
                this.$message({
                    message: "操作成功",
                    type: "success"
                });
            } else {
                this.$message({
                    message: "操作失败",
                    type: "error"
                });
            }
            this.findPage();
            this.dialogVisiblecheck = false;
            this.operation = false;
            this.editLoading = false;
        },
        //选择
        selectionChange(val) {
            this.sid = val.selections;
            this.multipleSelection = val;
        },

        handleSelect(item) {
            if (item != null && item != "") {
                //复制
                var driverData = $.extend(true, [], this.productForm.driverData);
                var isFirst = false;
                var this_ = this;
                $.each(driverData, function (key, val) {
                    if (val.driver_number == item.driver_number) {
                        val.mobile = item.mobile;
                        val.driver_type = item.driver_type;
                        val.drivername = item.drivername;
                        val.remark = item.remark;
                        val.id = item.id;
                        return false;
                    }
                });

                this.productForm.driverData = driverData;
            } else {}
        },
        //查看图片
        lookInfo: function () {
            this.dialogVisibleImage = true;
        },
        // 时间格式化
        dateFormat: function (row, column, cellValue, index) {
            return format(row[column.property]);
        },

        // 处理表格列过滤显示
        displayFilterColumnsDialog: function () {
            this.$refs.tableColumnFilterDialog.setDialogVisible(true);
        },
        // 处理表格列过滤显示
        handleFilterColumns: function (data) {
            this.filterColumns = data.filterColumns;
            this.$refs.tableColumnFilterDialog.setDialogVisible(false);
        },
        // 处理表格列过滤显示
        initColumns: function () {
            this.columns = [
                //{prop:"id", label:"ID", minWidth:50},
                {
                    prop: "company_name",
                    label: "单位名称",
                    minWidth: 120
                },
                {
                    prop: "taxpayer_identification_code",
                    label: "纳税人识别码",
                    minWidth: 120
                },
                {
                    prop: "client",
                    label: "客户",
                    minWidth: 120
                },
                {
                    prop: "registered_add",
                    label: "注册地址",
                    minWidth: 120
                },
                {
                    prop: "registered_num",
                    label: "注册电话",
                    minWidth: 120
                },
                {
                    prop: "bank_num",
                    label: "银行基本账户",
                    minWidth: 120
                },
                {
                    prop: "bank",
                    label: "开户银行",
                    minWidth: 120
                },
                //{prop:"General_taxpayer_certification", label:"资质证件", minWidth:120,formatter: this.fmimgs},
                {
                    prop: "approval_status",
                    label: "审核状态",
                    minWidth: 120,
                    formatter: this.location
                },
                {
                    prop: "create_time",
                    label: "创建时间",
                    minWidth: 120
                }
            ];
            var temp = [];
            $.each(this.columns, function (key, val) {
                temp.push(val);
            });
            this.filterColumns = temp;
        },
        location: function (row, column, cellValue, index) {
            if (cellValue == 0) {
                return "已审核";
            } else if (cellValue == 1) {
                return "未审核";
            } else if (cellValue == 2) {
                return "审核未通过";
            }
        },
        fmimgs: function (row, column, cellValue, index) {
            return ' <el-button size="mini" @click="handleEditProduct(scope.$index, scope.row)">编辑</el-button>';
        }
    },
    mounted() {
        this.findPage();
        this.initColumns();
    }
};
</script>

<style lang="scss" scoped>
</style>
